ספר הבישול של דפי הסגנון
הקדמה | פאנלים צדדיים | קישורים | טקסט | ניווט | דמויות | נקודות ציון
יצירה של פאנל צדדי בעזרת CSS
מתכון זה מראה לכם כיצד להשתמש בדף הסגנון שלכם כדי ליצור פאנל צדדי שרץ בצד שמאל של הדף שלכם.כמו זה או זה. כמו כן, אתם תלמדו כיצד להשתמש באותו המתכון ליצירה של כותרת מקושטת.
למה שתרצו לעשות זאת?
התשובה הברורה היא כמובן עבור קישוט, אך קישוט לא חייב להיות אך ורק דקורטיבי. לדוגמא, אולי תרצו באותו פאנל צדדי בסכימות צבע שונות עבור החלקים השונים של האתר שלכם, בכדי לעזור למשתמשים שלכם לדעת היכן הם - בשימוש של דפי סגנון, לשנות את הפאנל הצדדי כדי לעדכן את האתר שלכם זה מהיר וקל.
1. הוספת gif
הטכניקה הבסיסית כאן היא שיהיה לכם גיפ קטן שייראה אטרקטיבי ומשכנע כאשר הוא חוזר במורד הדף.
2. דף הסגנון שלכם
בדף הסגנון שלכם עליכם ליצור בורר כדי לבחור את גוף (BODY) הדף. ואז תרצו לתת לגוף מראה רקע בעזרת תכונת מאפיין הרקע (background-image).
זה מאוד פשוט וברור.
BODY {background-image: URL(../gifs/main-panel.gif)}
כמובן, החליפו את מה שבתוך הסוגריים העגולים עם ה-URL של הגיפ שיצרתם למעלה.
בשלב זה, אתם תמלאו את כל הרקע בדמות, החוזרת על עצמה, גם במורד הדף וגם לרוחבו, דבר שאתם אינכם רוצים. לכן, הנה החלק המתוחכם.
אתם צריכים לעשות כך שהגיפ יחזור על עצמו בכיוון "y" בלבד, זאת אומרת, במורד הדף, ולא גם למטה וגם לרוחב. שוב, הדבר פשוט אם אתם יודעים כיצד לעשות זאת. הקוד הגמור שלכם אמור להיראות כך.
BODY
{background-image: URL(../gifs/main-panel.gif);
background-repeat: repeat-y}
בלבד, זאת אומרת, במורד הדף, ולא גם למטה וגם לרוחב. שוב, הדבר פשוט אם אתם יודעים כיצד לעשות זאת.הקוד הגמור שלכם אמור להיראות כך.
BODY
{background-attachment: fixed;
background-image: URL(../gifs/main-panel.gif);
background-repeat: repeat-y}
ודאו כי דף הסגנון שלכם מקושר למסמך ה-HTML שעליו אתם רוצים שיופיע הפאנל הצדדי, וצאו לדרך.
לא עובד? בידקו ...
1. האם שמרתם את דף הסגנון?
2. האם יצרתם קישור בין דף הסגנון ומסמך ה-HTML?
3. האם ה-URL עבור הגיפ, שחוזר על עצמו, הוא נכון?
4. זכרו שהאפקט הקבוע "fixed" אינו נתמך ב-Netscape Communicator.
3. פאנלים שונים עבור חלקים שונים של האתר.
כעת, אם יש ברשותכם רק דף סגנון אחד, כמו שהמצב בדרך כלל, אין באפשרותכם פשוט ליישם את מראה הרקע לבורר ה- <BODY> selector. אחד עבור כל חלק של האתר שלכם. הבורר שלכם ייראה משהו כמו
BODY.main
BODY.archive
BODY.news
BODY.members
כעת פשוט תעברו ותיישמו את מאפייני הרקע לכל אחד מן הבוררים השונים הללו, בהגדירכם את ה-URL המתאים עבור כל חלק.
BODY.main {background-image: URL(../gifs/main-panel.gif);
background-repeat: repeat-y}
BODY.archive {background-image: URL(../gifs/archive-panel.gif);
background-repeat: repeat-y}
BODY.news {background-image: URL(../gifs/news-panel.gif);
background-repeat: repeat-y}
BODY.members{background-image: URL(../gifs/members-panel.gif);
background-repeat: repeat-y}
כעת עליכם ללכת לכל מסמכי ה-HTML שלכם ותנו ל-BODY בכל אחד מהם את המעמד המתאים. הקוד נראה כך
<body class="main"> in the Main section
<body class="archive"> in the Archive section
<body class="news"> in the News section
<body class="members"> in the Members section
כעת, לאחר שעשיתם את זה, ודאו שדף הסגנון אכן מקושר לכל אחד מן הדפים. שינוי המראה של פאנל הצד הוא פשוט כמו ליצור גיפ חדש, אך באמצעות שימוש בשמו הישן.
4. כותרת מקושטת
מראה רקע שחוזר על עצמו בצורה שכזו יכול להיות מיושם על כל אלמנט בדף.
H1
{background-image: URL(../gifs/heading1.gif);
background-repeat: repeat-y}
זכרו שבעיצוב של דף, כמו גם בכל עיצוב, פחות נחשב ליותר, לכן השתמשו בטכניקה החדשה שלכם בחוכמה.
הקדמה | פאנלים צדדיים | קישורים | טקסט | ניווט | דמויות | נקודות ציון
|
